<template>
  <div class="container px-4 mb-20">
    <h2 class="text-2xl font-semibold mb-7">Promotion details</h2>
    <section class="md:flex space-y-5 md:space-y-0 mb-5">
      <div
        class="bg-gray-darkest rounded p-5 flex md:w-[220px] md:flex-auto md:flex-shrink-0 items-start"
        style="flex: 1 1 20%"
      >
        <div>
          <h4 class="mb-5 flex">
            My rank
            <!-- <img
              class="ml-2 cursor-pointer"
              src="../../assets/img/question.svg"
              alt=""
            /> -->
          </h4>
          <div class="text-[60px] font-medium leading-tight">0</div>
        </div>
        <img
          class="hidden sm:block w-[60px] ml-7"
          src="/img/icon-metal.ade75dd6.svg"
          alt=""
        />
      </div>
      <div
        class="bg-gray-darkest rounded p-5 md:w-[220px] md:flex-auto md:flex-shrink-0 md:ml-5"
        style="flex: 1 1 20%"
      >
        <h4 class="mb-2.5 text-black-70">My commission rate</h4>
        <div class="mb-5">1.00 %</div>
        <h4 class="mb-2.5 text-black-70">Next level</h4>
        <div>Ł 12000</div>
      </div>
      <div class="bg-gray-darkest rounded p-5 md:ml-5" style="flex: 1 1 63%">
        <h4 class="text-black-70 mb-5">Total referral recharge</h4>
        <div class="text-[32px] font-medium text-yellow mb-5 leading-tight">
          Ł0
        </div>
        <div class="sm:flex sm:space-x-7 space-y-5 sm:space-y-0">
          <div>
            <span class="text-black-70 mr-1">Referral bonus</span
            ><span class="">Ł1</span>
          </div>
          <div>
            <span class="text-black-70 mr-1">Referral quantity</span><span>0</span>
          </div>
        </div>
      </div>
    </section>
    <div class="flex mb-14 sm:flex-row flex-col">
      <div
        class="bg-gray-darkest rounded p-5 sm:flex sm:space-x-5 space-y-5 sm:space-y-0"
        style="flex: 1 1 40%"
      >
        <div class="">
          <h3 class="text-black-70 mb-5">My referral QR code</h3>

          <div class="flex">
            <div
              class="bg-white rounded p-2.5 text-sm relative w-[163px] h-[163px] flex-shrink-0"
            >
              <img class="w-full h-full" alt="" :src="userinfos.wx_qr_code" />
            </div>
            <div class="ml-5 flex items-center">
              <p class="text-sm">
                <svg
                  width="20"
                  height="21"
                  viewBox="0 0 20 21"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  class="inline"
                >
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M18 10.4102C18 14.8284 14.4183 18.4102 10 18.4102C5.58172 18.4102 2 14.8284 2 10.4102C2 5.99188 5.58172 2.41016 10 2.41016C14.4183 2.41016 18 5.99188 18 10.4102ZM11 6.41016C11 6.96244 10.5523 7.41016 10 7.41016C9.44772 7.41016 9 6.96244 9 6.41016C9 5.85787 9.44772 5.41016 10 5.41016C10.5523 5.41016 11 5.85787 11 6.41016ZM9 9.41016C8.44772 9.41016 8 9.85787 8 10.4102C8 10.9624 8.44772 11.4102 9 11.4102V14.4102C9 14.9624 9.44772 15.4102 10 15.4102H11C11.5523 15.4102 12 14.9624 12 14.4102C12 13.8579 11.5523 13.4102 11 13.4102V10.4102C11 9.85787 10.5523 9.41016 10 9.41016H9Z"
                    fill="#10B981"
                  ></path>
                </svg>
                Share your promotion QR code to the public community, and users will become your "recommended users" after registering through the QR code.
              </p>
            </div>
          </div>
        </div>
      </div>
      <div
        class="bg-gray-darkest rounded p-5 sm:flex flex-col space-y-5 sm:ml-5 mt-5 sm:mt-0"
        style="flex: 1 1 60%"
      >
        <div class="flex-1">
          <h3 class="text-black-70 mb-5">My promotion link</h3>

          <div class="bg-white rounded p-2.5 text-sm relative">
            https://www.lucksec.cn/ref/c5rp84
            <div class="absolute inset-y-0 right-0 mr-2.5 flex">
              <!-- <button>
                <img src="../../assets/img/icon-op-copy.svg" alt="" />
              </button> -->
            </div>
          </div>
        </div>
        <div class="sm:flex-shrink-0">
          <h3 class="text-black-70 mb-5">My promo code</h3>
          <div class="bg-white rounded p-2.5 text-sm relative">
            {{ userinfos.sharecode }}
            <div
              class="absolute inset-y-2.5 right-0 mr-2.5 flex divide-x divide-gray-light"
            >
              <!-- <button class="px-5">
                <img src="../../assets/img/icon-op-copy.svg" alt="" /></button
              ><button class="px-5 pr-0">
                <img src="../../assets/img/icon-op-edit.svg" alt="" />
              </button> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <h2 class="text-2xl font-semibold mb-7">Promotion details</h2>
    <div class="relative">
      <div
        class="el-table--fit el-table--enable-row-hover el-table lk-table is-primary"
      >
        <div class="hidden-columns">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="el-table__header-wrapper">
          <table
            border="0"
            cellpadding="0"
            cellspacing="0"
            class="el-table__header"
            style="width: 1192px"
          >
            <colgroup>
              <col name="el-table_2_column_5" width="177" />
              <col name="el-table_2_column_6" width="420" />
              <col name="el-table_2_column_7" width="280" />
              <col name="el-table_2_column_8" width="315" />
              <col name="gutter" width="0" />
            </colgroup>
            <thead class="has-gutter">
              <tr class="">
                <th
                  class="el-table_2_column_5 is-leaf lk-table-header-cell"
                  colspan="1"
                  rowspan="1"
                >
                  <div class="cell">#<!----><!----></div>
                </th>
                <th
                  class="el-table_2_column_6 is-leaf lk-table-header-cell"
                  colspan="1"
                  rowspan="1"
                >
                  <div class="cell">Completion Time<!----><!----></div>
                </th>
                <th
                  class="el-table_2_column_7 is-leaf lk-table-header-cell"
                  colspan="1"
                  rowspan="1"
                >
                  <div class="cell">Commission<!----><!----></div>
                </th>
                <th
                  class="el-table_2_column_8 is-leaf lk-table-header-cell"
                  colspan="1"
                  rowspan="1"
                >
                  <div class="cell">Commission Status<!----><!----></div>

                </th>
              </tr>
            </thead>
          </table>
        </div>
        <div class="el-table__body-wrapper is-scrolling-none">
          <table
            class="el-table__body"
            cellspacing="0"
            cellpadding="0"
            border="0"
            style="width: 1192px"
          >
            <colgroup>
              <col name="el-table_2_column_5" width="177" />
              <col name="el-table_2_column_6" width="420" />
              <col name="el-table_2_column_7" width="280" />
              <col name="el-table_2_column_8" width="315" />
              <!---->
            </colgroup>
            <tbody></tbody>
          </table>
          <div
            class="el-table__empty-block"
            style="height: 100%; width: 1192px"
          >
            <span class="el-table__empty-text">There is no result～</span>
          </div>
          <!--v-if-->
        </div>
        <!--v-if--><!--v-if--><!--v-if--><!--v-if-->
        <div class="el-table__column-resize-proxy" style="display: none"></div>
      </div>
      <!---->
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.$api.userinfos().then((res) => {
      this.userinfos = res.data.data;
    });
  },
  data() {
    return {
      userinfos: {},
    };
  },
  methods: {},
};
</script>
<style lang="" scoped></style>
